import React, { PureComponent } from 'react'
import { Link } from 'react-router'
import { enquire } from 'enquire-js';

export default class Logo extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            isScreen: undefined,
        };
    }

    componentDidMount() {
        this.enquireScreenRegister();
    }

    /**
     * 注册监听屏幕的变化，可根据不同分辨率做对应的处理
     */
    enquireScreenRegister = () => {
        const isMobile = 'screen and (max-width: 720px)';
        const isTablet = 'screen and (min-width: 721px) and (max-width: 1199px)';
        const isDesktop = 'screen and (min-width: 1200px)';

        enquire.register(isMobile, this.enquireScreenHandle('isMobile'));
        enquire.register(isTablet, this.enquireScreenHandle('isTablet'));
        enquire.register(isDesktop, this.enquireScreenHandle('isDesktop'));
    };

    enquireScreenHandle = type => {
        let collapse;
        if (type === 'isMobile') {
            collapse = false;
        } else if (type === 'isTablet') {
            collapse = true;
        } else {
            collapse = this.state.collapse;
        }

        const handler = {
            match: () => {
                this.setState({
                    isScreen: type,
                    collapse,
                });
            },
            unmatch: () => {
                // handler unmatched
            },
        };

        return handler;
    };

    render () {
        return (
            <div className="logo" style={this.state.isScreen != "isMobile"?this.props.style:{width:200}}>
                <Link to="/" className="logo-text" style={{textDecoration: 'none'}}>
                    LearningNotes
                </Link>
            </div>
        )
    }
}
